<template>
    <view class="featured clearfix">
        <view class="title">
            <text class="h1">美景推荐</text><text class="desc">最美的推荐</text>
        </view>
        <view class="line"></view>
        <view class="content-item">
            <view class="left">
                <image class="left-img" src="http://newscover-zj.tourzj.com/2020/06/16/01234419a14ca10056f476a03ac0976ebf6de5.JPG!300X300" mode="aspectFit"></image>
            </view>
            <view class="right">
                <view class="title">初夏の洞头 | 暖了夏天蓝了海</view>
                <view class="info">
                    <text class="nums">23335人阅读</text>/
                    <text class="date">  2020-06-19</text>
                </view>
            </view>
        </view>
        <view class="content-item">
            <view class="left">
                <image class="left-img" src="http://newscover-zj.tourzj.com/2020/03/11/01371782a4d9ca97e6149cf6448c748ab4fc1c.jpg!300X300" mode="aspectFit"></image>
            </view>
            <view class="right">
                <view class="title">只在春天绽放的绝美花海，再不去看就得等明年了</view>
                <view class="info">
                    <text class="nums">377855人阅读</text>/
                    <text class="date">  2020-06-19</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .line{
        height: 1px;
        background-color: #efefef;
        margin-bottom: 20px;
    }
    .featured{
        margin: 10px 10px;
    }
    .title{
        margin: 20px 0;
    }
    .h1{
        border-left: 5px solid #007AFF;
        font-size: 15px;
        padding: 0 10px;
    }
    .desc{
        margin-left: 10px;
        font-size: 12px;
        color: #ccc3c6;
    }
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;
    }
    .content-item{
        display: flex;
        padding-bottom:20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #efefef;
    }
    .left-img{
        height: 5.5rem;
        width: 5.5rem;
        margin: 5px;
    }
    .right{
        margin: 0 5px;
    }
    .title{
        font-size: 14px
    }
    .info{
        font-size: 10px;
    }
    .nums{
        margin: 7px 7px 7px 0;
    }
    .date{
        margin: 7px;
    }
</style>
